<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <hr />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <div class="title-container">
          <div class="title-content">
            <h5 class="sub-title">羽毛超市系统</h5>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      version: "3.8.9"
    };
  }
};
</script>

<style scoped lang="scss">
.home {
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* 预留空间，可调整 */
    padding: 40px 20px; /* 上下留白40px，左右留白20px */
    text-align: center;
  }

  .title-content {
    .main-title {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #303133;
      line-height: 1.4;
    }

    .sub-title {
      font-size: 20px;
      font-weight: 400;
      margin: 0;
      color: #606266;
      line-height: 1.4;
    }
  }
}
</style>
